<template>
  <div class="system-box">
    <van-nav-bar
      title="系统信息"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group class="cell-container">
      <van-cell title="官方公众号信息"/>
      <van-cell title="微信公众号" :value="form.publicID"/>
      <van-cell title="公众号ID" :value="form.wechatPublic"/>

      <van-cell value="" class="">
        <template slot="title">
          <span class="cell-container-text">公众号二维码</span>
        </template>
        <template>
          <img
            class="cell-container-img"
            :src="form.imgUrl"
            @click="onClickImgPreview"
          >
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group class="cell-container">
      <van-cell title="关于我们"/>
    </van-cell-group>
  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    Icon,
    ImagePreview
  } from 'vant';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Icon.name]: Icon,
      [ImagePreview.name]: ImagePreview,
    },
    data() {
      return {
        form: {
          imgUrl: '../../../static/img/login.png',
          publicID: '群多多11',
          wechatPublic: '群多多'
        }
      }
    },
    mounted() {

    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      onClickImgPreview() {
        // 预览图片
        ImagePreview([
          this.form.imgUrl
        ]);
      }
    }
  }
</script>

<style scoped="scoped">
.system-box {
  height: 100%;
  background-color: #F7F7F7;
}
.cell-container {
  margin-bottom: 10px;
}
.cell-container-img {
  width: 76px;
  height: 76px;
}
.cell-container-text {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  line-height: 76px;
}
</style>